<template>
	<gui-page ref="guiPage" :customHeader="true">
		<template v-slot:gHeader>
			<nav-bar-custom left-icon="left" :title="$t('multilingual.inventory')"></nav-bar-custom>
		</template>
		<template v-slot:gBody>
			<view class="distributed">
				<view class="gui-bg-white gui-dark-bg-level-3 gui-padding-x distributed-head">
					<view class="gui-form-item gui-border-b">
						<text class="gui-form-label gui-secondary-text" style="width:400rpx">{{$t('finishedInventory.inventoryNumber')}}</text>
						<view class="gui-form-body gui-text-right">
							<input type="text" class="gui-form-input gui-text-right" v-model="fromData.billCode"
								:placeholder="$t('distributedEnter.placeholderText')" />
						</view>
					</view>
					<view class="gui-form-item gui-border-b">
						<text class="gui-form-label gui-secondary-text">{{$t('finishedInventory.inventoryDate')}}</text>
						<view class="gui-form-body gui-text-right" @click="dateChoose">
							<view class="gui-form-input gui-text-right" v-if="fromData.chooseTime.length">
								<text>{{fromData.chooseTime[0]}}</text> {{fromData.chooseTime[1] ? '-' : ''}} <text>{{fromData.chooseTime[1]}}</text>
							</view>
							<input v-else type="button" class="gui-form-input gui-text-right"
								:placeholder="$t('distributedEnter.placeholderTextChoose')" />
						</view>
					</view>
					<view class="gui-form-item gui-border-b gui-flex gui-justify-content-center">
						<view class="gui-flex gui-space-between gui-align-items-center"
							style="width: 70%;height: 100rpx;">
							<button type="default" class="gui-button gui-button-mini gui-bg-black4 gui-noborder"
								style="width:200rpx;" @click="reset">
								<text
									class="gui-block gui-color-black gui-button-text-mini gui-icons">{{$t('distributedEnter.reset')}}</text>
							</button>
							<button type="default" class="gui-button gui-button-mini gui-bg-blue gui-noborder"
								style="width:200rpx;" @click="search">
								<text
									class="gui-block gui-color-white gui-button-text-mini gui-icons">{{$t('distributedEnter.search')}}</text>
							</button>
						</view>
					</view>
				</view>
				<!-- 底部显示区域 -->
				<scroll-view :show-scrollbar="false" :scroll-y="true" class="scroll" @scrolltolower="scrolltolower">
					<view style="height: 15rpx"></view>
					<view class="card-boxCustom" v-for="(x,i) in data.list" @click="goPage(x)">
						<view class="card-head">
							<text>{{$t('finishedInventory.inventoryNumber')}}：{{ x.billCode }}</text>
						</view>
						<view class="card-body">
							<view class="card-body-item">
								<text class="body-item-title">{{$t('finishedInventory.warehouseName')}}：</text>{{ x.warehouseCode || x.mesWarehouseCode}}
							</view>
							<view class="card-body-item">
								<text class="body-item-title">{{$t('finishedInventory.inventoryDate')}}：</text>{{ x.checkStockTime || x.creationTime }}
							</view>
							<view class="card-body-item">
								<text class="body-item-title">{{$t('finishedInventory.creator')}}：</text> {{ x.createUserName }}
							</view>
						</view>
					</view>
					<view v-if="data.noticeHooks" class="noticeHooks">
					    {{data.list.length == 0 ? $t('stockManage.notAvailable') : $t('stockManage.without')}}
					</view>
				</scroll-view>
			</view>
			<calendarCustom ref="calendarCustomRef" @setTime="getTime" :selectTime="fromData.chooseTime">
			</calendarCustom>
		</template>
	</gui-page>
</template>
<script setup>
	import searchCustom from '@/components/searchCustom';
	import calendarCustom from '@/components/calendarCustom';
	import { useStore } from "vuex";
	import {
		ref,
		reactive,
		onMounted,
		getCurrentInstance
	} from 'vue';
	import { findStartCheckStock } from '@/api/api.js'
	import { basPdaOperationLogFn } from '@/utils/index.js';
	import { OPERATION_SEARCH, OPERATION_REASCT, OPERATION_LOOK, OPERATION_CHOOSE } from '@/constant/index.js'
	// 引入
	import { onShow } from '@dcloudio/uni-app';
	import graceJS from "@/Grace6/js/grace.js";
	import {
		navigate
	} from '@/utils/routerSkip.js';
	components: {
		searchCustom,
		calendarCustom
	}
	let store = useStore();
	let calendarCustomRef = ref(null);
	let fromData = reactive({
		chooseTime: [],
		billCode: '', // 盘点单号
		page:1,
		rows:10,
	});
	let data = reactive({
		list: [],
		noticeHooks: false, //暂无相关数据标识
	});
	const {
		ctx
	} = getCurrentInstance();
	onMounted(() => {
		// getRequestData()
		// getSystemTimeRequest()
	})
	onShow(()=>{
		// getRequestData()
		getSystemTimeRequest()
	})
	// 获取当前时间
	const getSystemTimeRequest = async () => {

		// 判断当前是否有时间  如果有有直接请求数据
		if(fromData.chooseTime.length) {
			getRequestData(OPERATION_LOOK)
			return
		}
		// 拿去当前时间   async  await 配套使用  否则会抛出错误
		let res = await store.dispatch('getSystemTimeRequest')
		if(res.length){
			fromData.chooseTime.push(res)
		}
		getRequestData(OPERATION_LOOK)
	}
	// 跳转详情界面
	const goPage = (x) => {
		console.log("222222222222",x)
		//清除 缓存总store签名信息
		store.commit('delFormData')
		try {
			let inputParameter = x.billCode
			let returnParameter = '无'
			let operationPicture = '盘点'
			let callInterface = '无'
			let opertionParmes = {
				inputParameter,
				returnParameter,
				operationPicture,
				callInterface,
				responseCode:'无',//返回状态
				errorMessage:'无',//错误信息
				isPass:'Y',//是否成功 Y N
				operationType:OPERATION_CHOOSE
			}
			basPdaOperationLogFn(opertionParmes)
		} catch (error) {

		}

		if(x.mesWarehouseCode=='RM')
		{
			navigate({
				url: `/pages/check/rmCheck/rmCheckInfo?id=${x.id}&&billCode=${x.billCode}`
			})
		}
		else{
			navigate({
				url: `/pages/check/checkDetail?id=${x.id}`
			})
		}

	}
	const search = () => {
		// 搜索的时候 重置请求页数
		fromData.page = 1
		getRequestData(OPERATION_SEARCH)
	}
	// 重置
	const reset = () => {
		fromData.chooseTime = []
		fromData.page = 1
		fromData.instockCode = ''
		getRequestData(OPERATION_REASCT)
	}
	//上拉加载
	const scrolltolower = () => {
		if(!data.noticeHooks){
			fromData.page ++
			getRequestData()
		}
	}
	// 盘点日期弹框打开
	const dateChoose = () => {
		calendarCustomRef.value.open();
	}
	// 选择时间
	const getTime = (times) => {
		fromData.chooseTime = times;
	}
	// 请求列表数据
	const getRequestData = (type) => {
		let parmes = {
			page:fromData.page,
		    rows:fromData.rows,
			checkStockTimeStart:fromData.chooseTime[0] || '', //入库开始时间
			checkStockTimeEnd:fromData.chooseTime[1] ? (fromData.chooseTime[1] + ' ' + '23:59:59.0') : fromData.chooseTime[0] ? (fromData.chooseTime[0] + ' ' + '23:59:59.0') : '', //入库结束时间
			billCode:fromData.billCode //入库单号
		}
		findStartCheckStock(parmes).then(res=>{
			try {
				let inputParameter = JSON.stringify(parmes)
				let returnParameter = JSON.stringify(res)
				let operationPicture = '盘点'
				let callInterface = res.rquestUrl
				let opertionParmes = {
					inputParameter,
					returnParameter,
					operationPicture,
					callInterface,
					responseCode:res.status,//返回状态
					errorMessage:res.message,//错误信息
					isPass:res.status == 200 ? 'Y' : 'N',//是否成功 Y N
					operationType:type || data.operationType
				}
				basPdaOperationLogFn(opertionParmes)
			} catch (error) {
			}
			data.operationType = type
			if(res.status == 200){
				data.noticeHooks = false
				// 根据接口返回设计上拉加载相应判断
				if(fromData.page === 1){
					if (res.data.rows.length == 0) {
						data.noticeHooks = true
					}
					data.list = res.data.rows
				}else{
					data.list = [...data.list, ...res.data.rows]
					// data.noticeHooks = data.list.length == res.data.total
					// if(data.list.length == res.data.total){
					// 	data.noticeHooks = true
					// }else{
					// 	data.list = [...data.list, ...res.data.rows]
					// }
				}
				data.noticeHooks = data.list.length >= res.data.total
			}
		})
	}
</script>
<style lang="scss" scoped>
	.distributed-head {
		border-bottom-left-radius: 16rpx;
		border-bottom-right-radius: 16rpx;
	}
	.noticeHooks{
		display: flex;
		align-items: center;
		justify-content: center;
		height: 80rpx;
		font-size: 32rpx;
		color: #999;
	}
	.scroll {
		flex: 1;
		height: 2rpx;
	}

	.distributed {
		display: flex;
		flex-direction: column;
		height: calc(100vh - 88rpx);
		// height: 100vh;
	}

	.card-box {
		margin: 0 15rpx;
		box-shadow: 0rpx 0rpx 4rpx 0 #A5A5A5;
		background: #fff;
		padding: 30rpx;
		border-radius: 16rpx;
	}

	.card-item {
		line-height: 60rpx;
	}

	.card-bottom {
		margin-bottom: 30rpx;
	}

	.filtrate-item {
		display: flex;
		align-items: center;
		font-size: 32rpx;
		margin-bottom: 20rpx;

		.filtrate-itemLeft {
			height: 32rpx;
			line-height: 32rpx;
			width: 100rpx;
		}

		.filtrate-itemRight {
			border: 2rpx solid #A5A5A5;
			border-radius: 8rpx;
			overflow: hidden;
			line-height: 40rpx;
			width: 300rpx;
		}
	}
</style>
